<template>
  <div class="loginWindow">
    <div class="loginWindow_div">
      <div class="loginWindow_body">
        <div class="loginWindow_system_name">
<!--          <img src="@/assets/logo.png"  alt=""/>-->
          <span>云为数据引进人才服务系统</span>
        </div>
        <div class="loginWindow_body_window">
          <div class="loginWindow_body_form">
            <el-form :model="form" ref="ruleFormRef" label-width="100px" label-position="top" class="demo-ruleForm">
              <el-form-item label="用户名：" prop="userName">
                <el-input size="large" v-model="form.useName" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码：" prop="pwd">
                <el-input size="large" v-model="form.pwd" type="password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="验证码：" prop="phone">
                <el-input size="large" v-model="form.phone" placeholder="点击获取验证码"></el-input>
              </el-form-item>
            </el-form>
            <div class="xieyi">
              <el-checkbox v-model="checked"></el-checkbox>
              <div class="xieyi_title">
                <span>同意</span>
                <span style="color: #2f8cec">《服务条款》</span>
                <span>和</span>
                <span style="color: #2f8cec">《隐私协议》</span>
              </div>
            </div>
          </div>
          <div class="loginWindow_body_btn">
            <div class="loginWindow_body_btn_body" :disabled="showLoading" v-loading="showLoading" @click="onLogin()">登录
            </div>
          </div>
        </div>
      </div>
      <div class="loginWindow_logo">
        <img src="@/assets/login.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>


import axios from "@/plugins/axios";
import store from "@/store";

export default {
  name: "loginIndex",
  data() {
    return {
      showLoading: false,
      checked: false,
      radio: 'teacher',
      activeName: 'teacher',
      aRouter: [
        {
          path: '/editPersonnel',
          name: 'editPersonnel',
          meta: {
            previousMenu: 'system',
            showNav: false,
            title: '人员详情'
          },
          component: () => import('@/views/editPersonnel/index.vue'),
        },
        {
          path: '/organizational',
          name: 'organizational',
          meta: {
            previousMenu: 'system',
            showNav: true,
            title: '组织架构'
          },
          component: () => import('@/views/organizational/index.vue'),
        },
      ],

      form: {
        useName: "",
        pwd: "",
        phone: ""
      },
      organization: ''

    };
  },

  methods: {
    async onLogin() {
      this.showLoading = true
      const res = await this.$axios.post('/graphql', {
        query: `
          mutation {
              autoLoginingScene {
                employeeLoginMock(
                  userName: "${this.form.useName}"
                  password: "${this.form.pwd}"
                  rememberMe: true
                  phone: "${this.form.phone}"
                ){
                    account {
                  id
                  displayName
                  createDate
                  isAnonymous
                  actived
                  loginCredentials {
                    id
                    domain
                    identifier
                  }
                }
                isSuperAdmin
                isCorporationAdmin
                actor {
                  id
                  name
                  type
                    ... on USERADMIN_Employee{

                        phoneNumber
                        officialRank
                        isMale
                        jionTeams{
                          tags
                        }
                        organization {
                          id
                          removed
                          uniqueCode
                          name
                          shortName
                          parent {
                            id
                            name
                          }
                          teams {
                            getItems {
                              id
                              name
                            }
                          }
                        }
                        removed
                        toIdentifierString
                    }
                }

                visit(id: "nav.group") {
                  id
                  title
                  description
                  icon
                  url

                }
                }
              }
            }

        `,
      })
      if (res.data.errors) {
        window.sessionStorage.removeItem('loginStatus')
      } else {
        let getAccount = res.data.data.autoLoginingScene.employeeLoginMock.account
        let getActor = res.data.data.autoLoginingScene.employeeLoginMock.actor
        this.organization = getActor.organization.id;
        console.log(this.organization, 'organization');
        window.sessionStorage.setItem('loginStatus', 'true')
        if (this.radio === 'teacher') {
          await this.$router.push({ path: '/', replace: true })
        }else if (this.radio === 'student') {
          await this.$router.push({ path: '/student', replace: true })
        }else if (this.radio === 'clerk') {
          await this.$router.push({ path: '/worker', replace: true })
        }

      }
      this.showLoading = false
    },

    resetForm() {
      this.form.useName = "";
      this.form.pwd = "";
      this.form.phone = "";
    },
  },
  created() { },
};
</script>





<style lang="scss" scoped>
.loginWindow {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  background-color: #eeeeee;

  .loginWindow_div {
    width: 1050px;
    height: auto;
    display: flex;
    background-color: #ffffff;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    border-radius: 10px;
    box-sizing: border-box;
    padding:  20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .loginWindow_logo {
      width: 500px;
      height: auto;

      &>img {
        width: 100%;
        height: auto;
      }
    }

    .loginWindow_body {
      width: calc(100% - 500px);
      box-sizing: border-box;
      padding-right: 40px;
      height: auto;
      border-right: 1px solid #eeeeee;

      .loginWindow_system_name {
        width: 100%;
        height: auto;
        font-size: 26px;
        font-weight: 700;
        margin-top: 20px;
        margin-bottom: 20px;
      }

      .loginWindow_body_window {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        //box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

        .loginWindow_body_form {
          width: 100%;
          height: auto;
          box-sizing: border-box;
          padding: 20px 0;
        }

        .loginWindow_body_btn {
          width: 100%;
          height: auto;
          box-sizing: border-box;
          padding-top: 30px;
          //border-top: 1px solid #eeeeee;
          text-align: center;

          .loginWindow_body_btn_body {
            width: 100%;
            height: 50px;
            color: #ffffff;
            font-size: 18px;
            border-radius: 10px;
            background-color: cornflowerblue;
            text-align: center;
            line-height: 50px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;

          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.loginWindow {
  .el-input__inner {
    border:none;
    border-radius: 0;
    padding: 0;
    border-bottom: 1px solid #bed3e8;
  }

  .el-form-item__label {
    width: 100%;
    line-height: 30px;
  }

  .el-form--label-top .el-form-item__label {
    padding: 0;
  }
}

.xieyi {
  width: 100%;
  height: auto;
  display: flex;
  display: -moz-flex;
  align-items: center;
  justify-content: start;
  display: -webkit-flex;

  .xieyi_title {
    box-sizing: border-box;
    padding-left: 10px;
    font-size: 14px;
    color: #335A82;
  }
}
</style>

